<template>
    <div class="content">
        <el-card>
            <el-form label-width="100px" :model="form" ref="form" :rules="rules">
                <el-form-item label="订单名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入订单名称" style="width: 440px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="订单编号:" prop="code">
                    <el-input v-model="form.code" placeholder="请输入订单编号"  style="width: 440px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="课程讲师:" prop="author">
                    <el-input v-model="form.author" placeholder="请输入课程讲师" style="width: 440px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="订单分类:" prop="category">
                    <el-cascader
                        style="width: 440px"
                        v-model="form.category"
                        placeholder="请选择订单分类"
                        :options="categoryList"
                        @change="handleChange"
                        clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="订单详情:" style="height: 60px;" prop="desc">
                    <el-input type="textarea"
                        style="width: 440px;"
                        v-model="form.desc"
                        placeholder="请输入订单详情"
                        maxlength="1000"
                        show-word-limit
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('保存')" size="small">保存</el-button>
                    <el-button @click="$router.back()" size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default{
    data(){
        return{
            form: {
                name: '',
                code: '',
                category: '',
                desc: '',
                author: ''
            },
            categoryList:[
                {
                    value: '1001',
                    label: '前端',
                    children: [
                        { value: "100101", label: "html5" },
                        { value: "100102", label: "vue" },
                        { value: "100103", label: "node" },
                        { value: "100104", label: "react" },
                        { value: "100105", label: "javascript" }
                    ]
                },
                {
                    value: '1002',
                    label: '后端',
                    children: [
                        { value: "100201", label: 'Java' },
                        { value: "100202", label: 'Mysql数据库' },
                        { value: "100203", label: 'C++' },
                        { value: "100204", label: '算法与数据结构' }
                    ]
                }
            ],
            rules:{
                name: [
                    {
                        required: true,
                        message: '请输入文章名称',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入文章编号',
                        trigger: 'blur'
                    }
                ],
                author: [
                    {
                        required: true,
                        message: '请输入文章作者',
                        trigger: 'blur'
                    }
                ],
                category: [
                    {
                        required: true,
                        message: '请选择文章分类',
                        trigger: 'blur'
                    }
                ],
                desc:[
                    {
                        required: true,
                        message: '请输入文章简介',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },

    methods: {
        onSubmit(str){
            alert('已成功' + str + "...")
            this.$router.back()
        }
    }
}

</script>

<style>
.el-form{
    margin-top: 20px;
}
</style>